<template>
  <el-main style="padding: 10px">
    <el-dialog
      title="具体信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>{{ dialogshow }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-card class="box-card" style="padding: 24px; margin-bottom: 10px">
      <el-form label-width="80px">
        <div class="card-header is-justify-space-between is-align-center el-row--flex" style="margin: 16px 0px">
          <span class="condition-title el-col el-col-24">筛选条件</span>
          <div class="el-col el-col-24 col-6410" style="padding-left: 10px; padding-right: 10px;" />
          <div class="el-col el-col-24 col-6748" style="padding-left: 10px; padding-right: 10px;" />
          <el-button type="default" class="button small">
            <span>重置</span>
          </el-button>
          <el-button class="button small" type="primary">
            <span>筛选</span>
          </el-button>
        </div>
        <div class="card-text">
          <el-row>
            <el-col :span="8">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学号">
                <el-input v-model="form.student_id" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="内容">
                <el-input v-model="form.student_id" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-card>

    <el-card class="box-card" style="padding: 24px">
      <el-table
        ref="filterTable"
        :data="tableData"
      >
        <el-table-column
          prop="date"
          label="日期"
          sortable
          width="180"
          column-key="date"
          :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
          :filter-method="filterHandler"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="stu_id"
          label="学号"
          sortable
          width="180"
        />
        <el-table-column
          prop="message"
          label="留言"
          :formatter="formatter"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.message }}</span>
            <el-button type="text" size="small" @click="handleClick(scope.$index,scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="tag"
          label="状态"
          width="100"
          :filters="[{ text: '未读', value: '未读' }, { text: '已读', value: '已读' },{ text: '处理中', value: '处理中' },{ text: '已完成', value: '已完成' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="(scope.row.tag === '已读' || scope.row.tag === '已完成') ? 'success' : 'primary'"
              disable-transitions
            >{{ scope.row.tag }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      value1: '',
      form: {
        student_id: ''
      },
      dialogshow: '123',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1518 弄',
        tag: '未读'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1517 弄',
        tag: '已读'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1519 弄',
        tag: '处理中'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        stu_id: '123456789',
        message: '上海市普陀区金沙江路 1516 弄',
        tag: '已完成'
      }]
    }
  },
  mounted() {
  },
  methods: {
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      return row.message
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleClick(index, row) {
      this.$data.dialogVisible = true
      this.$data.dialogshow = '你点击的是第' + index + '行  内容为'
      this.$data.dialogshow += row.message
      console.log(row)
    }
  }
}
</script>

<style scoped>
.condition-title {
  color: #2b3b4e;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}
</style>
